import { ThemingDemos } from "@/lib/@docs/demos/src";
import { ThemeColors } from "@/components/ThemeColors";
import { Layout } from "@/layout";
import { MDX_DATA } from "@/mdx";

export default Layout(MDX_DATA.Colors);

# Colors

Mantine uses [open-color](https://yeun.github.io/open-color/) in default theme with some additions.
Each color has 10 shades.

Colors are exposed on the [theme object](/theming/theme-object) as an array of strings,
you can access color shade by color name and index (0-9), colors with larger index are darker:

```tsx
import { useMantineTheme } from "@mantine/core";

function Demo() {
  const theme = useMantineTheme();

  return (
    <div
      style={{
        backgroundColor: theme.colors.blue[1],
        color: theme.colors.blue[9],
      }}
    >
      This is a blue theme
    </div>
  );
}
```

Colors are also exposed as [CSS variables](/styles/css-variables):

```scss
.demo {
  color: var(--mantine-color-red-5);
  background: var(--mantine-color-grape-9);
  border: rem(1px) solid var(--mantine-color-blue-1);
}
```

## Adding extra colors

You can add any number of extra colors to `theme.colors` object.
This will allow you to use them in all components that support `color` prop, for example
[Button](/core/button), [Badge](/core/badge) and [Switch](/core/switch).

<Demo data={ThemingDemos.colorsOverride} />

> **10 shades per color**
>
> Colors override must include **at least 10 shades per color**. Otherwise, you will get a TypeScript error
> and some variants will not have proper colors. If you only have one color value, you can either
> pick the remaining colors manually or use the [colors generator tool](/colors-generator).
>
> You can add more than 10 shades per color: these values will not be used by Mantine components with the default colors resolver,
> but you can still reference them by index, for example, `color="blue.11"`.

## Virtual colors

Virtual color is a special color which values should be different for light and dark color schemes.
To define a virtual color, use `virtualColor` function which accepts an object with the following
properties as a single argument:

- `name` – color name, must be the same as the key in `theme.colors` object
- `light` – a key of `theme.colors` object for light color scheme
- `dark` – a key of `theme.colors` object for dark color scheme

To see the demo in action, switch between light and dark color schemes (`Ctrl + J`):

<Demo data={ThemingDemos.virtualColors} />

## colorsTuple

Use `colorsTuple` function to:

- Use single color as the same color for all shades
- Transform dynamic string arrays to Mantine color tuple (the array should still have 10 values)

```tsx
import { colorsTuple, createTheme } from "@mantine/core";

const theme = createTheme({
  colors: {
    custom: colorsTuple("#FFC0CB"),
    dynamic: colorsTuple(Array.from({ length: 10 }, (_, index) => "#FFC0CB")),
  },
});
```

## Supported color formats

You can use the following color formats in `theme.colors`:

- HEX: `#fff`, `#ffffff`
- RGB: `rgb(255, 255, 255)`, `rgba(255, 255, 255, 0.5)`
- HSL: `hsl(0, 0%, 100%)`, `hsla(0, 0%, 100%, 0.5)`
- OKLCH: `oklch(96.27% 0.0217 238.66)`, `oklch(96.27% 0.0217 238.66 / 0.5)`

Example of adding oklch color to theme:

<Demo data={ThemingDemos.oklch} />

## primaryColor

`theme.primaryColor` is a key of `theme.colors`, it is used:

- As a default value for most of the components that support `color` prop
- To set default focus ring outline color

<Demo data={ThemingDemos.primaryColor} />

> **CSS color values at `theme.primaryColor`**
>
> Value of `theme.primaryColor` must be a key of `theme.colors` object. For example, `blue`, `orange` or `green`.
> You cannot assign CSS color values, for example, the following code will throw an error during theme merging:
>
> ```tsx
> import { MantineProvider } from "@mantine/core";
>
> function Demo() {
>   return (
>     <MantineProvider
>       theme={{
>         primaryColor: "#CEFEDC", // This will throw an error
>       }}
>     >
>       {/* Your app here */}
>     </MantineProvider>
>   );
> }
> ```

## primaryShade

`theme.primaryShade` is a number from 0 to 9. It determines which shade will be used for the components that have `color` prop.

<Demo data={ThemingDemos.primaryShadeConfigurator} />

You can also customize primary shade for dark and light color schemes separately:

```tsx
import { MantineProvider } from "@mantine/core";

function Demo() {
  return (
    <MantineProvider theme={{ primaryShade: { light: 6, dark: 8 } }}>
      {/* Your app here */}
    </MantineProvider>
  );
}
```

## Color prop

Components that support changing their color have `color` prop. This prop supports the following values:

- Key of `theme.colors`, for example, `blue` or `green`
- Key of `theme.colors` with color index, for example, `blue.5` or `green.9`
- CSS color value, for example, `#fff` or `rgba(0, 0, 0, 0.5)`

<Demo data={ThemingDemos.colorProp} />

## Colors index reference

You can reference colors by index in `color` prop and [style props](/styles/style-props), for example `c` prop:

<Demo data={ThemingDemos.colorsIndexConfigurator} />

## Difference between color and c props

`color` prop is used to control multiple CSS properties of the component. These properties can vary across different components,
but usually `color` prop controls `background`, `color` and `border-color` CSS properties. For example,
when you set `color="#C3FF36"` on [Button](/core/button) component (with `variant="filled"`), it will set the following CSS properties:

- `background-color` to `#C3FF36`
- `background-color` when button is hovered to `#B0E631` (`#C3FF36` darkened by 10%)
- `color` to `var(--mantine-color-white)`
- `border-color` to `transparent`

`c` is a [style prop](/styles/style-props) – it is responsible for setting a single CSS property `color` (color of the text).
You can combine both props to achieve better contrast between text and background. In the following example:

- `color` prop sets all `background: #C3FF36` and `color: var(--mantine-color-white)`
- `c` prop overrides color styles to `color: var(--mantine-color-black)`

<Demo data={ThemingDemos.colorAndCProps} />

## Colors variant resolver

`theme.variantColorResolver` is a function that is used to determine which colors will be used
in different variants in the following components: [Alert](/core/alert), [Avatar](/core/avatar), [Button](/core/button), [Badge](/core/badge) and [ActionIcon](/core/action-icon).

It accepts an object argument with the following properties:

```tsx
interface VariantColorsResolverInput {
  /** `color` prop passed to component */
  color: MantineColor | undefined;

  /** `variant` prop passed to component */
  variant: string;

  /** `gradient` prop passed to component, used only for gradient variant by default */
  gradient?: MantineGradient;

  /** Theme object */
  theme: MantineTheme;
}
```

`theme.variantColorResolver` must return an object with the following properties:

```tsx
interface VariantColorResolverResult {
  background: string;
  hover: string;
  color: string;
  border: string;
}
```

You can use `theme.variantColorResolver` to customize colors handling by default variants
or to add new variants support:

<Demo data={ThemingDemos.variantColorsResolver} />

## Colors generation

You can use [colors generator](/colors-generator) to generate 10 shades of color based on a single value
or install `@mantine/colors-generator` package to generate dynamic colors in your application:

<InstallScript packages="chroma-js @mantine/colors-generator" />

The package exports `generateColors` function that accepts a color value and returns an array of 10 shades.
Note that `generateColors` function works best with darker colors (blue, violet, red) and may produce
colors with poor contrast for lighter colors (yellow, teal, orange). Usually, it is better to generate
colors in advance to avoid contrast issues.

```tsx
import { generateColors } from "@mantine/colors-generator";
import { MantineProvider } from "@mantine/core";

function Demo() {
  return (
    <MantineProvider
      theme={{
        colors: {
          "pale-blue": generateColors("#375EAC"),
        },
      }}
    >
      {/* Your app here */}
    </MantineProvider>
  );
}
```

## Default colors

<ThemeColors />

## Add custom colors types

TypeScript will only autocomplete Mantine's default colors when accessing the theme. To add your custom colors to the MantineColor type, you can use TypeScript module declaration.

```ts
import { DefaultMantineColor, MantineColorsTuple } from "@mantine/core";

type ExtendedCustomColors =
  | "primaryColorName"
  | "secondaryColorName"
  | DefaultMantineColor;

declare module "@mantine/core" {
  export interface MantineThemeColorsOverride {
    colors: Record<ExtendedCustomColors, MantineColorsTuple>;
  }
}
```
